<div class="mock-auth-container">
  <!-- 左侧：Mock Server 信息 -->
  <div class="left-panel">
    <!-- Mock Server 状态 -->
    <div class="server-status-card">
      <h3>Mock Server 状态</h3>
      
      <div class="status-info">
        <div class="status-item">
          <span class="label">运行状态:</span>
          <span class="value running">运行中</span>
        </div>
        
        <div class="status-item">
          <span class="label">端口:</span>
          <span class="value">4200</span>
        </div>
        
        <div class="status-item">
          <span class="label">API 基础路径:</span>
          <span class="value">/api/</span>
        </div>
        
        <div class="status-item">
          <span class="label">网络延迟:</span>
          <span class="value">100ms</span>
        </div>
      </div>
      
      <!-- 统计信息 -->
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number">{{ operationCount() }}</div>
          <div class="stat-label">总操作数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number success">{{ successCount() }}</div>
          <div class="stat-label">成功操作</div>
        </div>
        <div class="stat-item">
          <div class="stat-number error">{{ errorCount() }}</div>
          <div class="stat-label">失败操作</div>
        </div>
      </div>
    </div>

    <!-- 请求历史 -->
    <div class="request-history-card">
      <h3>请求历史</h3>
      
      <div class="request-list">
        @for (log of httpLogs$ | async; track log.id) {
          <div 
            class="request-item"
            [class.success]="log.response && log.response.status && log.response.status >= 200 && log.response.status < 400"
            [class.error]="log.response && log.response.status && log.response.status >= 400">
            
            <div class="request-header">
              <span class="method post">POST</span>
              <span class="url">{{ log.request.url }}</span>
              <span class="status" [class]="getStatusClass(log.response.status || 0)">{{ log.response.status || 0 }}</span>
              <span class="timestamp">{{ log.timestamp }}</span>
            </div>
            
            @if (log.request.req || log.response.body) {
              <div class="request-details">
                @if (log.request.req) {
                  <div class="detail-section">
                    <h5>请求体:</h5>
                    <pre class="json-content">{{ log.request.req | json }}</pre>
                  </div>
                }
                
                @if (log.response.body) {
                  <div class="detail-section">
                    <h5>响应:</h5>
                    <pre class="json-content">{{ log.response.body | json }}</pre>
                  </div>
                }
              </div>
            }
          </div>
        } @empty {
          <div class="empty-state">
            <p>暂无请求记录</p>
          </div>
        }
      </div>
    </div>
  </div>

  <!-- 右侧：认证功能 -->
  <div class="right-panel">
    <!-- 快速登录 -->
    <div class="quick-login-card">
      <h3>内置用户</h3>
      
      <div class="user-grid">
        @for (user of mockUsers; track user.username) {
          <div 
            class="user-card"
            (click)="quickLogin(user)">
            
            <img 
              [src]="user.avatar" 
              [alt]="user.username + ' 头像'"
              [title]="user.username + ' 头像'"
              title="用户头像"
              class="user-avatar">
            
            <div class="user-info">
              <div class="username">{{ user.username }}</div>
              <div class="role">{{ user.role }}</div>
              <div class="description">{{ user.description }}</div>
            </div>
          </div>
        }
      </div>
    </div>

    <!-- 登录表单 -->
    <div class="login-form-card">
      <h3>登录表单</h3>
      
      <form (ngSubmit)="performLogin()" class="login-form">
        <div class="form-group">
          <label for="username">用户名:</label>
          <input 
            id="username"
            type="text" 
            [formControl]="usernameControl"
            placeholder="请输入用户名"
            required>
          @if (getControlError(usernameControl, '用户名')) {
            <div class="field-error">{{ getControlError(usernameControl, '用户名') }}</div>
          }
        </div>
        
        <div class="form-group">
          <label for="password">密码:</label>
          <input 
            id="password"
            type="password" 
            [formControl]="passwordControl"
            placeholder="请输入密码"
            required>
          @if (getControlError(passwordControl, '密码')) {
            <div class="field-error">{{ getControlError(passwordControl, '密码') }}</div>
          }
        </div>
        
        <button 
          type="submit" 
          class="btn btn-primary"
          [disabled]="isLoading$ | async">
          {{ (isLoading$ | async) ? '登录中...' : '登录' }}
        </button>
        
        @if (loginErrorMessage()) {
          <div class="error-message">
            {{ loginErrorMessage() }}
          </div>
        }
      </form>
    </div>

    <!-- 认证状态 -->
    <div class="auth-status-card">
      <h3>认证状态</h3>
      
      <div class="status-display">
        <div class="status-item">
          <span class="label">认证状态:</span>
          <span class="value" [class.authenticated]="isAuthenticated$ | async">
            {{ (isAuthenticated$ | async) ? '已认证' : '未认证' }}
          </span>
        </div>
        
        @if (currentUser$ | async; as user) {
          <div class="status-item">
            <span class="label">当前用户:</span>
            <span class="value">{{ user.username }}</span>
          </div>
          
          <div class="status-item">
            <span class="label">邮箱:</span>
            <span class="value">{{ user.email }}</span>
          </div>
        }
      </div>
      
      @if (isAuthenticated$ | async) {
        <button 
          class="btn btn-secondary"
          (click)="performLogout()">
          登出
        </button>
      }
      
      <div class="auth-actions">
        <button 
          class="btn btn-outline"
          (click)="refreshToken()"
          [disabled]="!(isAuthenticated$ | async)">
          刷新 Token
        </button>
        
        <button 
          class="btn btn-outline"
          (click)="checkTokenStatus()">
          检查状态
        </button>
        
        <button 
          class="btn btn-outline"
          (click)="testAuthenticatedRequest()"
          [disabled]="!(isAuthenticated$ | async)">
          测试拦截器
        </button>
      </div>
    </div>

    <!-- 操作历史 -->
    <div class="operation-history-card">
      <h3>操作历史</h3>
      
      <div class="history-list">
        @for (operation of operationHistory(); track operation.id) {
          <div 
            class="history-item"
            [class]="'history-' + operation.result">
            
            <div class="history-time">{{ operation.timestamp }}</div>
            <div class="history-action">{{ operation.action }}</div>
            <div class="history-details">{{ operation.details }}</div>
          </div>
        } @empty {
          <div class="empty-state">
            <p>暂无操作记录</p>
          </div>
        }
      </div>
    </div>

    <!-- Token 管理 -->
    @if (showTokenInfo()) {
      <div class="token-management-card">
        <h3>Token 管理</h3>
      
      <div class="token-info">
        <div class="token-field">
          <span class="label">Token 状态:</span>
          <span [class]="tokenInfo().isValid ? 'valid' : 'invalid'">
            {{ tokenInfo().isValid ? '有效' : '无效' }}
          </span>
        </div>
        
        @if (tokenInfo().expiresAt) {
          <div class="token-field">
            <span class="label">过期时间:</span>
            <span>{{ tokenInfo().expiresAt }}</span>
          </div>
        }
        
        @if (tokenInfo().token) {
          <div class="token-field">
            <span class="label">Token 内容:</span>
            <code class="token-content">{{ tokenInfo().token?.substring(0, 50) }}...</code>
          </div>
        }
      </div>

      @if (tokenDecoded()) {
        <div class="token-decoded">
          <h4>Token 解码信息</h4>
          
          <!-- Header 信息 -->
          <div class="decoded-section">
            <h5>Header (头部)</h5>
            <pre class="json-content">{{ tokenDecoded()?.header | json }}</pre>
          </div>
          
          <!-- Payload 信息 -->
          <div class="decoded-section">
            <h5>Payload (载荷)</h5>
            <pre class="json-content">{{ tokenDecoded()?.payload | json }}</pre>
          </div>
          
          <!-- Signature 信息 -->
          <div class="decoded-section">
            <h5>Signature (签名)</h5>
            <code class="signature-content">{{ tokenDecoded()?.signature }}</code>
          </div>
          
          <!-- 完整 Token -->
          <div class="decoded-section">
            <h5>完整 Token</h5>
            <code class="full-token">{{ tokenDecoded()?.raw }}</code>
          </div>
        </div>
      }
    </div>
    }
  </div>
</div>
